仿羅斯科繪畫

接下來，會介紹到更多更豐富的樣式，首先我們來透過CSS在網頁上模仿羅斯科繪畫，羅斯科是誰？2012年5月7日，他的代表作《橙、紅、黃》，以8,690萬美元（6.75億港元）成交，他的畫你也可以畫得出。

更多馬克·羅斯科

盒模型 (box model)

先前已經介紹過關於padding與margin，這裡讓我來介紹更多細節：

.one {
    margin: 20px;
<!-- 上下左右各20px -->

    margin: 20px auto;
<!-- 上下各20px, 左右自動調整 -->
<!-- auto通常用來填滿剩餘的空間 -->

    margin: 0 20vw 20px;
<!-- 上0, 左右為20%視窗可視寬度, 下20px-->
<!-- vw,vh可以藉由瀏覽器的伸縮來即時的改變寬高 -->

    margin: 0 0 20px 20px;
<!-- 上0, 右0, 下20px, 左20px -->
}

在長度(length)的部分，除了畫素(px)、百分比(%)、可視寬高(vw, vh)，也能夠使用函數calc()，來計算其中的值，例如：

.two{
    width: calc((20vw - 20px)/3.1415);
}

模糊 (blur)

我喜歡看著爺爺的眼睛，在歲月的流動之下不再清澈，瞳孔隨著逐漸惡化的慢性疾病出現色斑，如同一幅抽像畫的作畫的過程，常常盯著一看就是整個下午。
這裡介紹常用的模糊效果：
text-shadow: ;
box-shadow: ;
filter: blur();
實際上前面兩個只是在文字或區塊上，透過陰影的方式來實踐模糊。

而filter: blur()就是標準的高斯模糊，裡面的參數放的是模糊半徑(radius)，有了這個方法就可以把插入的圖片做出模糊效果了，一起來完成仿羅斯科繪畫吧。

下一篇：保持彈性

引用與資源：
freecodecamp
w3school
mdn_web_docs
我的仿羅斯科繪畫